<script setup lang="ts"></script>
<template>
    <div class="main">
        <div class="div_table">

        <table>
            <thead>
                <tr>
                    <td>班级</td>
                    <td>姓名</td>
                    <td>原因</td>
                    <td>人数</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>病假</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>事假</td>
                    <td>2/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>病假</td>
                    <td>3/3</td>
                </tr>
            </tbody>
            
        </table>
        </div>
    </div>
</template>

<style scoped>
.div_table {
    width: 100%;
    height: 95%;
    overflow-y: auto;



    /* 针对Webkit内核的浏览器 */
    &::-webkit-scrollbar {
        /* 设置滚动条的宽度 */
        width: 8px;
    }

    /* 滚动条轨道 - 背景颜色/白底 */
    &::-webkit-scrollbar-track {
        background: #ffffff;
        border-radius: 10px;
    }

    /* 滚动条的滑块部分 */
    &::-webkit-scrollbar-thumb {
        background: #70e0ff;
        border-radius: 10px;
    }

    /* 当鼠标悬停在滚动条滑块上时改变颜色 */
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(250, 184, 2, 0.4);
    }
}

table {
    width: 100%;
}

table,
th,
td {
    border-collapse: collapse;
    border: 1px solid #70e0ff;
    color: white;
}

th {
    font-size: 1.2vw;
}

td {
    font-size: 0.8vw;
    text-align: center;
}

tbody>tr:hover {
    background-color: #70e0ff;
    color: #000000 !important;
}
.main{
    background-image: url(../../images/baode.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 50vh;

    padding: 8vh 3vw;
    box-sizing: border-box;
}
</style>
